<template>
	<div>
		<div class="main-content">
			<div class="data-content">
				<div class="table-content">
					<div class="table-title">
						<div class="title-text">学生给我的留言</div>
					</div>
					<el-table
						:data="dataList"
						border
						v-loading="dataListLoading"
						@selection-change="selectionChangeHandler"
						style="width: 100%;">
						<el-table-column
							prop="liuyanren"
							header-align="center"
							align="center"
							label="留言人">
						</el-table-column>
						<el-table-column
							prop="jieshouren"
							header-align="center"
							align="center"
							label="接收人">
						</el-table-column>
						<el-table-column
							prop="liuyanshijian"
							header-align="center"
							align="center"
							label="留言时间">
						</el-table-column>
						<el-table-column
							prop="content"
							header-align="center"
							align="center"
							label="留言内容">
						</el-table-column>
						<el-table-column
							prop="huifu"
							header-align="center"
							align="center"
							label="回复内容">
						</el-table-column>
						<el-table-column
							fixed="right"
							header-align="center"
							align="center"
							width="150"
							label="操作">
							<template #default="scope">
								<el-button type="text" size="small" @click="replyClick(scope.row)">回复</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						@size-change="sizeChangeHandle"
						@current-change="currentChangeHandle"
						:current-page="pageIndex"
						:page-sizes="[10, 20, 50, 100]"
						:page-size="pageSize"
						:total="totalPage"
						layout="total, sizes, prev, pager, next, jumper"
						class="pagination-content">
					</el-pagination>
				</div>
			</div>
		</div>
		<!-- 回复弹窗 -->
		<el-dialog
			v-model="replyVisible"
			title="回复留言"
			width="50%"
			destroy-on-close>
			<el-form :model="replyForm" ref="replyFormRef" :rules="rules" label-width="100px">
				<el-form-item label="留言内容" prop="content">
					<el-input type="textarea" v-model="replyForm.content" :rows="4" disabled></el-input>
				</el-form-item>
				<el-form-item label="回复内容" prop="huifu">
					<el-input type="textarea" v-model="replyForm.huifu" :rows="4" placeholder="请输入回复内容"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="replyVisible = false">取消</el-button>
					<el-button type="primary" @click="submitReply">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		onMounted
	} from 'vue';
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	
	// 数据列表
	const dataList = ref([])
	// 分页
	const pageIndex = ref(1)
	const pageSize = ref(10)
	const totalPage = ref(0)
	// 加载
	const dataListLoading = ref(false)
	// 选中数据
	const selRows = ref([])
	// 回复弹窗
	const replyVisible = ref(false)
	const replyForm = ref({
		id: null,
		content: '',
		huifu: ''
	})
	const replyFormRef = ref(null)
	// 表单验证规则
	const rules = {
		huifu: [
			{ required: true, message: '请输入回复内容', trigger: 'blur' }
		]
	}

	// 获取数据列表
	const getDataList = () => {
		dataListLoading.value = true
		context?.$http({
			url: 'liuyan/list',
			method: 'get',
			params: {
				page: pageIndex.value,
				limit: pageSize.value,
				sort: 'id',
				order: 'desc',
				jieshouren: context?.$toolUtil.storageGet('adminName')
			}
		}).then(res => {
			if (res.data.code === 0) {
				dataList.value = res.data.page.list
				totalPage.value = res.data.page.totalCount
			}
			dataListLoading.value = false
		})
	}

	// 每页数
	const sizeChangeHandle = (val) => {
		pageSize.value = val
		pageIndex.value = 1
		getDataList()
	}

	// 当前页
	const currentChangeHandle = (val) => {
		pageIndex.value = val
		getDataList()
	}

	// 多选
	const selectionChangeHandler = (val) => {
		selRows.value = val
	}

	// 回复
	const replyClick = (row) => {
		replyForm.value = {
			id: row.id,
			content: row.content,
			huifu: row.huifu || ''
		}
		replyVisible.value = true
	}

	// 提交回复
	const submitReply = () => {
		replyFormRef.value.validate((valid) => {
			if (valid) {
				context?.$http({
					url: 'liuyan/update',
					method: 'post',
					data: replyForm.value
				}).then(res => {
					if (res.data.code === 0) {
						context?.$toolUtil.message('回复成功', 'success')
						replyVisible.value = false
						getDataList()
					} else {
						context?.$toolUtil.message(res.data.msg, 'error')
					}
				})
			}
		})
	}

	onMounted(() => {
		getDataList()
	})
</script>

<style lang="scss" scoped>
.main-content {
	padding: 20px;
	.data-content {
		background: #fff;
		padding: 20px;
		border-radius: 4px;
		.table-content {
			.table-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20px;
				.title-text {
					font-size: 18px;
					font-weight: bold;
				}
			}
			:deep(.el-table) {
				th {
					font-size: 16px;
					font-weight: bold;
				}
				td {
					font-size: 15px;
				}
			}
		}
	}
}
.pagination-content {
	margin-top: 20px;
	text-align: right;
}
</style> 